<template>
  <div class="content-box">
    <div class="video_warp">
      <video id="videoPlayer" class="video-js vjs-default-skin" controls playsinline autoplay="autoplay" width="500px">
      <source :src="videoSrc" type="application/x-mpegURL" />
    </video>
    </div>

    <div class="btn_warp">
      <div class="top_div">
        <div class="img_box"><img src="./imgVideo/h.png" /></div>
        <div class="img_box"><img src="./imgVideo/a.png" /></div>
        <div class="img_box"><img src="./imgVideo/d.png" /></div>
      </div>
      <div class="top_div">
        <div class="img_box"><img src="./imgVideo/g.png" /></div>
        <div class="img_box text_btn">
          <img src="./imgVideo/s.png" style="width: 35px;height:35px" /><img
            style="width: 35px;height:35px"
            src="./imgVideo/big.png"
          />
        </div>
        <div class="img_box"><img src="./imgVideo/c.png" /></div>
      </div>
      <div class="top_div">
        <div class="img_box"><img src="./imgVideo/f.png" /></div>
        <div class="img_box"><img src="./imgVideo/b.png" /></div>
        <div class="img_box"><img src="./imgVideo/e.png" /></div>
      </div>
    </div>
  </div>
</template>
<script>
import videojs from "video.js";
import "video.js/dist/video-js.css";
export default {
  data() {
    return {
      videoSrc: "",
      dp: null,
      options: {
        autoplay: false, // 设置自动播放
        muted: true, // 设置了它为true，才可实现自动播放,同时视频也被静音（Chrome66及以上版本，禁止音视频的自动播放）
        preload: "auto", // 预加载
        controls: true, // 显示播放的控件
      },
    };
  },
  mounted() {
   // 使用 $nextTick 解决vedio报错  The element or ID supplied is not valid. (videojs)
    this.$nextTick(() => {
      this.loadVideo();
    });
  },
  created() {
    console.log(this.$route.query.url);
    if (this.$route.query.url) {
      this.videoSrc = this.$route.query.url;
    }
  },
  methods: {
    loadVideo() {
      this.db = videojs("videoPlayer", this.options);
    },
  },
  beforeDestroy() {
      if (this.dp) {
        this.dp.dispose(); // dispose()会直接删除Dom元素
      }
    },
};
</script>
<style lang="scss" scoped>
.content-box {
  width: 100%;
  min-height: 100vh;
  padding: 10px;
  box-sizing: border-box;
  // background: #f1f2f6;
  .video_warp {
    text-align: center;
    #videoPlayer{
      width: 100%;
      height: 500px;
    }
  }
}
.btn_warp {
  height: calc(100vh - 500px);
  background-color: #F2F6FC;
  padding: 100px 20px 0px 20px;
  .top_div {
    display: flex;
    justify-content: center;
    .img_box {
      width: 150px;
      height: 50px;
      cursor: pointer;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .text_btn {
      background-color: #fff;
      height: 46px;
      padding: 20px 30px 20px 30px;
      box-sizing: border-box;
      border-radius: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.12);
    }
  }
}
</style>
